<template>
  <div class="setting-form12">
    <Row type="flex" align="middle" justify="center">
      <Col>
        <Form ref="formDynamic" :model="formDynamic" :rules="ruleValidate" :label-width="110" inline>
          <Row type="flex" align="middle" v-for="(item, index) in formDynamic.items" :key="index">
            <Col>
              <FormItem label="设备名称：" prop='equipmentName'>
                <Input type="text" v-model="formDynamic.equipmentName" style='width:180px'></Input>
              </FormItem>
              <FormItem label="初始账户：" prop='equipmentName'>
                <Input type="text" v-model="formDynamic.equipmentName" style='width:180px'></Input>
              </FormItem>
            </Col>
            <Col style='margin-left:16px;margin-bottom:20px'>
              <Icon type="ios-trash" style='padding-right:20px' @click="handleRemove(index)" size='20' v-if='formDynamic.items.length > 1'/>
              <Icon type="ios-add-circle" style='color: #2D8CF0' @click="handleAdd" size='20' v-if='index === formDynamic.items.length-1'/>
            </Col>
          </Row>
          <FormItem>
            <Button :type="btnType?'primary':null" @click="handleSubmit('formDynamic')" style="width:120px;margin-top:8px">确定</Button>
          </FormItem>
        </Form>
      </Col>
    </Row>
  </div>
</template>
<script>
// import { getDicQuery, setDicSave } from '@/api/setting'
export default {
  data () {
    return {
      btnType: true,
      title: '店内区域设置',
      formData: {},
      modelName: '',
      formDynamic: {
        equipmentName: '',
        items: [
          {
            value: '',
            index: 1
          }
        ]
      },
      ruleValidate: {},
      paramter: {
        'shopId': this.$route.query.id,
        'merchantId': this.$store.state.user.merchantId,
        'msType': '1'
      }
    }
  },
  methods: {
    handleSubmit (name) {
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.$Message.success('success!')
        } else {
          this.$Message.error('Fail!')
        }
      })
    },
    handleAdd () {
      this.index++
      this.formDynamic.items.push({
        value: '',
        index: this.index
      })
    },
    handleRemove (index) {
      if (this.formDynamic.items.length > 1) {
        this.formDynamic.items.splice(index, 1)
      }
    }
  },
  mounted () {
  }
}
</script>

<style scoped>
  .setting-form12{
    padding-top: 60px;
    height: 100%;
  }
</style>
